<template>
	<view class="Recommend">
		<swiper  class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in pictures" :key="item.id">
			<image @click="onPreviewImage(item.url)" :src="item.url"></image>
		</swiper-item>
		</swiper>
		<view class="policyDescList">
			<view class="policyItem" v-for="(item,index) in indexData.policyDescList" :key="index">
				<image :src="item.icon" mode=""></image>
				<text>{{item.desc}}</text>
			</view>
		</view>
		<view class="kingKongList" v-if="indexData.kingKongModule" >
			<view class="kingKongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image class="kingKongModuleImage"  :src ="item.picUrl" mode=""></image>
				<view class="kingKongModuleText">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="categoryModule" v-if="indexData.categoryModule">
			<view class="categoryModuleList" v-for="(item,index) in indexData.categoryModule" :key="index">
				<view class="titlePic">
					<image :src="item.titlePicUrl" mode=""></image>
				</view>
				<scroll-view class= "categoryScrollView" scroll-x="true"  enable-flex>
					<view class="categoryItem" v-for="categoryItem in item.itemList" :key="categoryItem.simpleDesc">
						<image class="categoryItemImage"  :src ="categoryItem.showPicUrl" mode=""></image>
						<view class="categoryItemText">
							{{categoryItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"Recommend",
		data() {
			return {
				pictures:[
					{id:'1',url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg"},
					{id:'2',url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg"},
					{id:'3',url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg"},
					{id:'4',url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg"},
					{id:'5',url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg"},
				]
			};
		},
		computed:{
			...mapState({
				indexData : (state)=>state.home.indexData
			})
		},
		methods:{
			onPreviewImage(url){
				//微信预览
				uni.previewImage({
					urls:this.pictures.map(v=>v.url),
					current:url
				})
			}
		}
	}
</script>

<style lang="stylus">
	.Recommend
		.banner
			width: 100%
			height: 350rpx
			image
				width: 100%
				height: 100%
		.policyDescList
			width: 100%
			display: flex
			font-size: 26rpx
			margin-top: 20rpx
			.policyItem
				flex: 1
				text-align: center
				image
					width: 36rpx
					height: 36rpx
					vertical-align: middle
			
		
		.kingKongList
			margin-top: 30rpx
			display: flex
			flex-wrap: wrap
			text-align: center
			.kingKongItem
				width: 20%
				.kingKongModuleImage
					width: 100rpx
					height: 100rpx
				.kingKongModuleText
					font-size: 24rpx
		.categoryModuleList
			width: 100%
			margin-top: 20rpx
			image
				width:100%
				height: 280rpx
			.categoryScrollView
				display: flex
				white-space: nowrap
				.categoryItem
					width: 180rpx
					margin-left: 10rpx
					margin-right: 10rpx
					text-align: center
					.categoryItemImage
						width: 180rpx
						height: 220rpx
						background-color: #eee
					.categoryItemText
						font-size: 20rpx
						white-space: pre-wrap
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow :ellipsis
						overflow: hidden
		.test
			background: #fff
</style>